<script lang="ts" setup>
import { doGetCaptcha, doRegister } from '@/api/auth';
import { Captcha, Register } from '@/api/auth/type';
import { useAuthStore } from '@/store/auth';
import { onMounted, ref, defineProps, defineEmits, watch } from 'vue';
import img from "../../../assets/avatar.png";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:show', 'register-success']);

const upload = ref([]);
const showPopup = ref(false);

const register = ref({
    user: {},
    captcha: {}
} as Register);

const onSubmit = async () => {
    try {
        await doRegister(register.value);
        const authStore = useAuthStore();
        emit('register-success');
        emit('update:show', false);
        authStore.goLogin();
    } catch (error) {
        console.error('注册失败', error);
        getCaptcha(); // 刷新验证码
    }
}

const closePopup = () => {
    emit('update:show', false);
}

const uploadAvatar = (file: object, detail: object) => {
    const upload = file as Upload;
    register.value.user.avatar = upload.content;
}

const getCaptcha = () => {
    doGetCaptcha().then((res) => {
        const data = res.data as Captcha;
        register.value.captcha = data;
    });
}

onMounted(() => {
    getCaptcha();
});

// 监听props.show的变化
watch(() => props.show, (newVal) => {
    showPopup.value = newVal;
});

watch(() => showPopup.value, (newVal) => {
    emit('update:show', newVal);
});

type Upload = {
    content: string,
    file: File,
    message: string,
    objectUrl: string,
    status: string
}
</script>

<template>
    <van-popup v-model:show="showPopup" round position="center" class="register-popup" close-on-click-overlay>
        <div class="register-container">
            <div class="register-header">
                <h3>用户注册</h3>
                <van-icon name="cross" @click="closePopup" />
            </div>
            
            <van-form @submit="onSubmit">
                <div class="avatar">
                    <van-uploader :v-model="upload" :after-read="uploadAvatar" multiple>
                        <van-image
                            :round="true"
                            width="100"
                            height="100"
                            :src="register.user.avatar || img"
                        />
                    </van-uploader>
                </div>
                <van-cell-group inset>
                    <van-field
                        v-model="register.user.nickname"
                        name="昵称"
                        label="昵称"
                        placeholder="昵称"
                        :rules="[{ required: true, message: '请填写昵称' }]"
                    />
                    <van-field
                        v-model="register.user.username"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请输入正确的用户名', pattern: new RegExp('^[a-zA-Z0-9]{4,10}$') }]"
                    />
                    <van-field
                        v-model="register.user.password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请输入正确的密码' }]"
                    />
                    <van-field
                        v-model="register.user.phone"
                        name="手机号"
                        label="手机号"
                        placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                    <van-field
                        v-model="register.captcha.captchaCode"
                        name="验证码"
                        label="验证码"
                        placeholder="验证码"
                        :rules="[{ required: true, message: '请填写验证码' }]"
                    >
                        <template #input>
                            <div class="captcha">
                                <van-field
                                    style="padding: 0%;"
                                    v-model="register.captcha.captchaCode"
                                    name="验证码"
                                    placeholder="验证码"
                                    :rules="[{ required: true, message: '请填写验证码' }]"
                                />
                                <img 
                                    @click="getCaptcha"
                                    class="captcha-img"
                                    :src="register.captcha.captchaBase64"
                                    alt="验证码"
                                />
                            </div>
                        </template>
                    </van-field>
                </van-cell-group>
                <div class="submit-btn">
                    <van-button round block type="primary" native-type="submit">
                    注册
                    </van-button>
                </div>
            </van-form>
        </div>
    </van-popup>
</template>

<style lang="scss" scoped>
.register-popup {
    width: 90%;
    max-width: 500px;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    
    .register-container {
        padding: 20px;
    }
    
    .register-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        
        h3 {
            font-size: 20px;
            font-weight: 600;
            margin: 0;
        }
        
        .van-icon {
            font-size: 22px;
            cursor: pointer;
        }
    }
    
    .avatar {
        display: flex;
        justify-content: center;
        margin: 15px 0;
    }
    
    .submit-btn {
        margin: 24px 16px 8px;
    }
}

.captcha {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    
    .van-field {
        flex: 1;
    }
    
    .captcha-img {
        flex-shrink: 0;
        cursor: pointer;
        height: 30px;
        width: 120px;
    }
}

@media (max-width: 480px) {
    .register-popup {
        width: 95%;
        
        .register-container {
            padding: 15px;
        }
        
        .submit-btn {
            margin: 20px 10px 5px;
        }
    }
}
</style>